<template>
  <div id="register-div">
    <el-card class="box-card">
      <div class="grid-content bg-purple">
        <div class="register-text">用户注册</div>
        <el-form>
          <el-form-item label="账号:">
            <el-row>
              <el-col :span="20">
                <el-input style="margin-left: 20px" class="register-item" id="account" label="账号" placeholder="请输入账号" v-model="account"
                          clearable></el-input>
              </el-col>
            </el-row>

          </el-form-item>

          <el-form-item label="邮箱：">
            <el-row :gutter="12">
              <el-col :span="16">
                <el-input style="margin-left: 6px" class="register-item" type="email" id="mail" label="邮箱" placeholder="请输入邮箱" v-model="mail"
                          clearable></el-input>
              </el-col>
              <el-col :span="4">
                <el-button v-on:click="sendValidCode()">发送</el-button>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="验证码：">
            <el-row>
              <el-col :span="20">
                <el-input :disabled="validCodeState" class="register-item" type="number" id="validCode" label="验证码" placeholder="请输入验证码"
                          v-model="validCode"
                          clearable></el-input>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="昵称：">
            <el-row>
              <el-col :span="20">
                <el-input style="margin-left: 13px" class="register-item" id="nickname" label="昵称" placeholder="请输入昵称" v-model="nickname"
                          clearable></el-input>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="密码：">
            <el-row>
              <el-col :span="20">
                <el-input style="margin-left: 13px" type="password" class="register-item" id="password" placeholder="请输入密码" v-model="password"
                          show-password></el-input>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="确认密码：">
            <el-row>
              <el-col :span="19">
                <el-input style="margin-left: 4px" type="password" class="register-item" id="validPassword" placeholder="请再次输入密码" v-model="validPassword"
                          show-password></el-input>
              </el-col>
            </el-row>
          </el-form-item>

        </el-form>


        <el-button type="warning" class="register-button" :loading="registerLoading" v-on:click="cancel"
                   style="margin-left: 15px;">取消
        </el-button>
        <el-button type="primary" class="register-button" :loading="registerLoading" v-on:click="submit">提交</el-button>
      </div>

    </el-card>
  </div>
</template>

<script>
const axios = require("axios");
import qs from 'qs';

export default {
  data() {
    return {
      account: '',
      password: '',
      nickname: '',
      validPassword: '',
      registerLoading: false,
      mail: '',
      validCode: '',
      validCodeState: true
    }
  },
  methods: {
    sendValidCode: function () {
      if (!this.mail || this.mail.trim() === 0) {
        this.$message.warning("请输入邮箱！");
        return;
      }

      let b = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(this.mail.trim());
      if (!b) {
        this.$message.warning("请输入正确的邮箱！");
        return;
      }

      axios.post("/api/user/sendValidCode", qs.stringify({
        mail: this.mail.trim()
      })).then(res => {
        if (res.data.code === 200) {
          this.$message.success("验证码已发送至您的邮箱，请注意查收！");
          this.validCodeState = false;
        } else {
          this.$message.error(res.data.msg);
        }
      })
    },
    cancel() {
      this.$router.go(-1);
    },

    submit: function () {
      if (this.account.trim() === '') {
        this.$message.warning("账号不能为空！")
        return;
      }

      if (this.account.trim().length > 50) {
        this.$message.warning("账号字符不能超过50个！")
        return;
      }

      if (this.mail && this.mail.trim() === 0) {
        this.$message.warning("请输入邮箱！");
        return;
      }

      let b = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(this.mail.trim());
      if (!b) {
        this.$message.warning("请输入正确的邮箱！");
        return;
      }

      if (this.mail && this.validCode.trim() === 0) {
        this.$message.warning("请输入邮箱！");
        return;
      }

      if (this.nickname.trim() === '') {
        this.$message.warning("昵称不能为空！")
        return;
      }

      if (this.nickname.trim().length > 5) {
        this.$message.warning("昵称字符不能超过5个！")
        return;
      }

      if (this.password.trim() === '') {
        this.$message.warning("密码不能为空！")
        return
      }

      if (this.validPassword !== this.password) {
        this.$message.warning("两次密码输入不一致！");
        return;
      }

      this.registerLoading = true;
      axios.post("/api/user/add_user", qs.stringify({
        account: this.account.trim(),
        nickname: this.nickname.trim(),
        password: this.password.trim(),
        mail: this.mail.trim(),
        validCode: this.validCode.trim()
      })).then((res) => {
        if (res.data.code === 200) {
          this.$message.success("注册成功！请登录。")
          setTimeout(() => {
            this.$router.push("/login");
          }, 2000)
        } else {
          this.$message.warning(res.data.msg);
          this.registerLoading = false;
        }

      }).catch((err) => {
        console.error(err);
        this.registerLoading = false;
      })
    }
  }
}
</script>

<style scoped>
#register-div {
  margin-top: 70px;
}

.register-text {
  font-size: 1.25rem;
  text-align: center;
  margin-top: 1.25rem;
  margin-bottom: 20px;
}

.box-card {
  width: 480px;
  margin: auto;
}

.register-button {
  float: right;
  margin-bottom: 15px;
}

.register-item {
  margin-bottom: 15px;
  padding: 0;
}
</style>
